<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现轮播图</title>
    <style>
        .banner {
            border: 4px solid black;
            width: 400px;
            height: 150px;
            box-sizing: content-box;
        }

        .banner .banner-wrapper {
            position: relative;
            height: 100%;
            width: 100%;
            /*溢出隐藏*/
            overflow: hidden;
            /*设置堆叠顺序-1*/
            z-index: -1;
        }

        .banner-list {
            width: 1200px;
            height: 100%;
            /*设置绝对定位*/
            position: absolute;
            left: 0;
            top: 0;
            padding: 0;
            margin: 0;
            list-style: none;
            /*infinite:无限循环*/
            /*动画时间10s*/
            animation: banner-swipe 10s ease-in infinite;
        }

        .banner-list .item {
            width: 400px;
            height: 100%;
            display: inline-block;
            float: left;
            font-weight: bold;
            font-size: 40px;
            line-height: 150px;
        }

        #item1 {
            background: yellow;
        }

        #item2 {
            background: red;
        }

        #item3 {
            background-color: blue;
        }

        /*  CSS 帧动画  */
        @keyframes banner-swipe {
            0% {
                left: 0
            }
            50% {
                left: -400px;
            }
            100% {
                left: -800px;
            }
        }
    </style>
</head>
<body>
<div class="banner">
    <div class="banner-wrapper">
        <ul class="banner-list">
            <li class="item" id="item1">1</li>
            <li class="item" id="item2">2</li>
            <li class="item" id="item3">3</li>
        </ul>
    </div>
</div>
</body>
</html>